<template>
  <div>
    <!-- this is my course for teacher page! -->
    <!-- 面包屑 -->
    <div class="bg-breadcrumb">
      <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/teacher/teacherhomepage' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>我的课程</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <el-card style="margin-top: 15px;" shadow="always" :body-style="{ padding: '20px' }">
      <!-- card body -->
      <!-- 列出教师的所有课程 -->
      <el-table
      :data="courseList"
      class="lesson-table"
      style="width: 100%">
        <!-- 课程名 -->
        <el-table-column
          label="课程名称"
          align="center"
          prop="course_name"
          width="140">
        </el-table-column>
        <!-- 专业 -->
        <el-table-column
          prop="class_name"
          align="center"
          label="上课专业">
        </el-table-column>
        <el-table-column
          prop="genre"
          align="center"
          label="课程类型">
        </el-table-column>
        <el-table-column
          prop="class_period"
          align="center"
          label="课时">
        </el-table-column>
        <el-table-column
          prop="credict"
          align="center"
          label="课程学分">
        </el-table-column>
        <el-table-column
          prop="classroom"
          align="center"
          label="上课教室">
        </el-table-column>
        <!-- 上课从第几周到第几周 -->
        <el-table-column
          prop="class_cycle"
          align="center"
          label="上课周期">
        </el-table-column>
        <!-- 上课时间 -->
        <el-table-column
          prop="time_list[0].courseTime"
          align="center"
          label="上课时间">
          <template slot-scope="scope">
            <el-dropdown trigger="click">
              <span class="el-dropdown-link">
                显示时间<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item v-for="(item, index) in scope.row.time_list" :key="index">{{ item.courseTime }}</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

  </div>
</template>

<script>
export default {
  data () {
    return {
      courseList: [],
      courseNum: 0,
      currentPage: 1
    }
  },
  created () {
    this.getCourseList()
  },
  methods: {
    async getCourseList () {
      const { data: res } = await this.$http.post(`courseManagement/getSelfCourseTeacherList?page=${this.currentPage - 1}&rows=10`)
      console.log(res)
      if (!res.state) return this.$message.error(res.msg)
      this.foreachObj(res.detail)
      this.courseNum = res.detail.total
    },

    // 处理后端数据
    foreachObj (data) {
      data.forEach(item => {
        var obj = {
          id: 0,
          course_name: '',
          class_cycle: '',
          class_name: '',
          course_teacher_num: '',
          class_period: '',
          classroom: '',
          credict: '',
          genre: '',
          teacher_name: '',
          time_list: [],
          week_start: 0,
          week_end: 0,
          time_type: 0
        }
        // 需要将classCycle拆分一下
        const cycle = item.classCycle.split(' ')
        obj.week_start = cycle[0]
        obj.week_end = cycle[1]
        obj.time_type = cycle[2]

        obj.class_cycle = cycle[0] + '-' + cycle[1] + '周'
        obj.id = item.id
        obj.course_name = item.courseName
        obj.classroom = item.classroom
        obj.class_name = item.className
        obj.course_teacher_num = item.courseTeacherNum
        obj.class_period = item.classPeriod
        obj.credict = item.credict
        obj.genre = item.genre
        obj.teacher_name = item.teacherName
        this.$http.post(`courseManagement/all/selectCourseManagementListById?id=${item.id}`)
          .then(resp => {
            const { data: res } = resp
            // console.log(res)
            // 这里的解决方式暂时保留（有问题），
            // 后期需要存入多个时间点时就不能只取第一个时间了
            obj.time_list = res.detail.courseTime
          }).catch(err => {
            console.log(err)
          })
        this.courseList.push(obj)
      })
    }
  }
}
</script>

<style lang="less" scoped>
.lesson-table {

  .el-dropdown-link {
    cursor: pointer;
    color: #27B148;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
}
</style>
